<template>
	<view v-if="shopInfo" :class="shopClass">
		<block v-if="type == 1">
			<image v-if="shopInfo.banner" class="shop-banner" :src="shopInfo.banner" mode="aspectFit"></image>
			<view class="shop-box">
				<view class="shop-text">
					<view class="shop-buttons gray">
						<view class="shop-button" @click="wxCard()">
							<image class="shop-button-icon" :src="$util.img('/upload/uniapp/ydl/wxcard.png')"
								mode="aspectFit"></image>
							<view class="shop-button-text">名片</view>
						</view>
						<view class="shop-button" @click="follow()" v-if="hasFollow">
							<image class="shop-button-icon" :src="$util.img('/upload/uniapp/ydl/follow.png')"
								mode="aspectFit"></image>
							<view class="shop-button-text">已关注</view>
						</view>
						<view class="shop-button" @click="follow()" v-else>
							<image class="shop-button-icon" :src="$util.img('/upload/uniapp/ydl/unfollow.png')"
								mode="aspectFit"></image>
							<view class="shop-button-text">关注</view>
						</view>
					</view>
					<view class="">
						<view class="shop-name">{{shopInfo.site_name}}</view>
						<view class="shop-row flex-left">
							<view class="shop-time">{{shopInfo.open_status}} | {{shopInfo.open_date}}</view>
							<view class="shop-type">{{shopInfo.category_name}}</view>
						</view>
						<view v-if="shopInfo.keywords_map && shopInfo.keywords_map.length"
							class="shop-row shop-services">
							<view class="shop-service" v-for="(value,key) in shopInfo.keywords_map" :key="key">{{value}}
							</view>
						</view>
					</view>
				</view>
				<view class="div-line"></view>
				<view class="shop-location">
					<view class="location-main">
						<view class="shop-address">{{shopInfo.full_address}}{{shopInfo.address}}</view>
						<view class="shop-buttons">
							<view class="shop-button" @click="openMapLg">
								<image class="shop-button-icon" :src="$util.img('/upload/uniapp/ydl/car.png')"
									mode="aspectFit"></image>
								<!-- <image class="shop-button-icon" src="" mode="aspectFit"></image> -->
								<view class="shop-button-text">到店</view>
							</view>
							<view class="shop-button" @click="mobileCall(shopInfo.telephone || shopInfo.mobile)">
								<image class="shop-button-icon" :src="$util.img('/upload/uniapp/ydl/phone.png')"
									mode="aspectFit"></image>
								<!-- <uni-icons  class="shop-button-icon" type="phone-filled" size="15" color="#FC6E20"></uni-icons> -->
								<view class="shop-button-text ">电话</view>
							</view>
						</view>
					</view>
					<view class="shop-distance shop-row">{{shopInfo.distance}}</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="shop-image">
				<image v-if="shopInfo.avatar" :src="$util.img(shopInfo.avatar)"
					@error="shopInfo.avatar = $util.getDefaultImage().default_shop_img" mode="aspectFit" />
				<image v-else :src="$util.getDefaultImage().default_shop_img" mode="aspectFit" />
			</view>
			<view class="shop-con">
				<view class="info-top" @click="toIntroduction()">
					<view class="info-name" :style="value ? 'color:' + value.color : '#303133'">
						{{ shopInfo.site_name }}
						<text class="iconfont icongengduo"></text>
					</view>
				</view>
				<view class="info-desc" @click="toIntroduction()">
					<view class="desc-star" :style="value ? 'color:' + value.color : '#303133'">
						综合评分：
						<text>{{ ((parseFloat(shopInfo.shop_desccredit) + parseFloat(shopInfo.shop_servicecredit) + parseFloat(shopInfo.shop_deliverycredit)) / 3).toFixed(1) }}</text>
					</view>
					<!-- <text class="fans" :style="value ? 'color:' + value.color : '#303133'">粉丝数：{{ shopInfo.sub_num }}</text> -->
				</view>
			</view>
			<button type="primary" size="mini" class="info-follow" @click="follow()" v-if="hasFollow">
				<text class="iconfont iconguanzhu active"></text>
				<text>已关注</text>
			</button>
			<button type="warn" size="mini" class="info-follow" @click="follow()" v-if="!hasFollow">
				<text class="iconfont iconguanzhu"></text>
				<text>关注</text>
			</button>
			<button type="warn" size="mini" class="info-weixin" @click="wxCard()">
				<text class="iconfont iconweixin1"></text>
				<text>微信名片</text>
			</button>
		</block>


		<uni-popup ref="wxCardPopup" type="center" class="wxcard-popup">
			<view class="kefu-modal" v-if="shopInfo.wx_card">
				<view class="kefu-text">
					请保存微信二维码，扫一扫加好友联系商家，或拨打电话
					<text class="kefu-mobile"
						@click="mobileCall(shopInfo.telephone || shopInfo.mobile)">{{shopInfo.telephone || shopInfo.mobile}}</text>
				</view>
				<view class="kefu-qrcode">
					<image class="kefu-qrcode-image" :src="shopInfo.wx_card" mode="aspectFit"></image>
				</view>
				<view class="kefu-save" @click="savewxCard(shopInfo.wx_card)">
					长按保存微信名片
				</view>
			</view>
			<view class="kefu-modal" v-else>
				<view class="kefu-text">商户未设置微信名片，可电话联系商户</view>
				<view class="kefu-mobile" @click="mobileCall(shopInfo.telephone || shopInfo.mobile)">
					{{shopInfo.telephone || shopInfo.mobile}}
				</view>
			</view>
		</uni-popup>
		<ns-login ref="login"></ns-login>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import Map from '@/common/js/map/openMap.js';
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				shopInfo: {
					logo: '',
					site_name: '',
					sub_num: 0,
					shop_desccredit: 0,
					shop_servicecredit: 0,
					shop_deliverycredit: 0
				},
				hasFollow: false
			};
		},
		computed: {
			shopClass() {
				let data = 'shop-info';
				if (this.$props.type == 1) {
					data = "shop-new-info";
				}
				return data;
			}
		},
		props: {
			value: {
				type: Object,
				default: null
			},
			siteId: {
				type: [Number, String],
				default: 0
			},
			type: {
				type: Number,
				default: 0 //0为店铺首页  带图的那种  为其他页面不带图的那种
			}
		},
		watch: {
			siteId() {
				this.getShopInfo();
				this.isFollow();
			}
		},
		created() {
			this.getShopInfo();
			this.isFollow();
		},
		methods: {
			mobileCall(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile
				})
			},
			openMapLg() {
				if (!isNaN(Number(this.shopInfo.latitude)) && !isNaN(Number(this.shopInfo.longitude))) {
					Map.openMap(Number(this.shopInfo.latitude), Number(this.shopInfo.longitude), this.shopInfo.site_name,
						'gcj02');
				} else {
					this.$util.showToast({
						title: '商家位置信息未完善'
					});
				}
			},
			wxCard() { //弹窗微信名片
				this.$refs.wxCardPopup.open();
			},
			// 保存海报到本地
			savewxCard(wxcard) {
				let _this = this;
				// #ifdef H5 
				_this.downloadIamge(wxcard, 'image');
				// #endif

				// #ifdef MP || MP-ALIPAY || APP-PLUS || APP-PLUS-NVUE
				_this.downloadImageOfMp(wxcard)
				// #endif
			},
			//下载图片地址和图片名
			downloadIamge(imgsrc, name) {
				var image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute('crossorigin', 'anonymous');
				image.onload = () => {
					var canvas = document.createElement('canvas');
					canvas.width = image.width;
					canvas.height = image.height;
					var context = canvas.getContext('2d');
					context.drawImage(image, 0, 0, image.width, image.height);
					var url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
					var a = document.createElement('a'); // 生成一个a元素
					var event = new MouseEvent('click'); // 创建一个单击事件
					a.download = name || 'photo'; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;
			},
			downloadImageOfMp(image) {
				let _this = this

				// #ifdef APP-PLUS || APP-PLUS-NVUE
				uni.downloadFile({
					url: image,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success() {
								_this.$util.showToast({
									title: '保存成功'
								});
							},
							fail() {
								_this.$util.showToast({
									title: '图片保存失败'
								});
							}
						});
					},
					fail() {
						_this.$util.showToast({
							title: '下载失败'
						});
					}
				})
				// #endif

				// #ifdef MP
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						// 先下载到本地
						uni.downloadFile({
							url: image,
							success(res) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success() {
										_this.$util.showToast({
											title: '保存成功'
										});
									},
									fail() {
										_this.$util.showToast({
											title: '图片保存失败'
										});
									}
								});
							},
							fail() {
								_this.$util.showToast({
									title: '下载失败'
								});
							}
						})
					},
					fail() {
						//console.log('授权失败')
					}
				})
				// #endif
			},
			//关注与取消
			follow() {
				var that = this;
				if (!uni.getStorageSync('token')) {
					this.$refs.login.open();
					// this.$util.redirectTo(
					// 	'/otherpages/login/login/login', {
					// 		back: '/otherpages/shop/index/index?site_id=' + this.siteId
					// 	},
					// 	'redirectTo'
					// );
					return;
				}
				if (this.hasFollow) {
					uni.showModal({
						title: '提示',
						content: '真的要取消关注嘛',
						success: function(res) {
							if (res.confirm) {
								that.$api.sendRequest({
									url: '/api/shopmember/delete',
									data: {
										site_id: that.siteId
									},
									success: res => {
										if (res.code == 0 && res.data) {
											that.hasFollow = !that.hasFollow;
											that.$util.showToast({
												title: '取消成功'
											});
										}
										that.$forceUpdate()
									}
								});
							}
						}
					});
				} else {
					this.$api.sendRequest({
						url: '/api/shopmember/add',
						data: {
							site_id: this.siteId
						},
						success: res => {
							if (res.code == -1 && res.error_code == 'TOKEN_ERROR') {
								this.$util.showToast({
									title: '登录失败'
								});
								setTimeout(() => {
									this.$util.redirectTo(
										'/otherpages/login/login/login', {
											back: '/otherpages/shop/index/index?site_id=' + this
												.siteId
										},
										'redirectTo'
									);
								}, 1000);
								return;
							}
							if (res.code == 0) {
								this.hasFollow = !this.hasFollow;
								this.$util.showToast({
									title: '关注成功'
								});
							}
							this.$forceUpdate()
						}
					});
				}

			},
			//跳转至店铺详细信息页面
			toIntroduction() {
				if (getCurrentPages()[getCurrentPages().length - 1].route != 'otherpages/shop/introduce/introduce') {
					this.$util.redirectTo('/otherpages/shop/introduce/introduce', {
						site_id: this.siteId
					});
				}
			},
			//获取店铺详情
			getShopInfo() {
				let data = {};
				data.site_id = this.siteId;
				if (uni.getStorageSync('location')) {
					data.lat = uni.getStorageSync('location').latitude;
					data.lng = uni.getStorageSync('location').longitude;
				}
				this.$api.sendRequest({
					url: '/api/shop/info',
					data: data,
					success: res => {
						if (res.code == 0) {
							this.shopInfo = res.data;
						}
					}
				});
			},
			//是否关注
			isFollow() {
				this.$api.sendRequest({
					url: '/api/shopmember/issubscribe',
					data: {
						site_id: this.siteId
					},
					success: res => {
						if (res.code == 0) {
							this.hasFollow = res.data;
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.shop-buttons {
		display: flex;
		justify-content: center;
		align-items: center;

		.shop-button {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			&:first-child {
				margin-right: 40rpx;
			}

			.shop-button-icon {
				width: 48rpx;
				height: 48rpx;
			}

			.shop-button-text {
				font-size: 20rpx;
				color: #1B1B1B;
				line-height: 28rpx;
			}
		}

		&.gray {
			.shop-button {
				.shop-button-icon {
					width: 50rpx;
					height: 50rpx;
				}

				.shop-button-text {
					color: #999;
				}
			}
		}
	}

	.shop-new-info {
		margin-left: 30rpx;

		.shop-banner {
			margin-top: 24rpx;
			margin-bottom: 10rpx;
			width: 690rpx;
			height: 280rpx;
			background-color: #fff;
			border-radius: 16rpx;
		}

		.shop-box {
			padding: 40rpx 30rpx;
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 16px;
			margin-bottom: 20rpx;
		}

		.shop-row {
			margin-top: 16rpx;
		}

		.shop-text {
			position: relative;

			.shop-buttons {
				position: absolute;
				right: 0;
				top: 30rpx;
			}

			.shop-name {
				font-size: 36rpx;
				color: #1B1B1B;
				line-height: 50rpx;
				margin-bottom: 24rpx;
			}

			.shop-time {
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
			}

			.shop-type {
				margin-left: 30rpx;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
			}

			.flex-left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.shop-services {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.shop-service {
					margin-right: 16rpx;
					padding: 4rpx;
					font-size: 20rpx;
					color: #666666;
					line-height: 28rpx;
					border: 1rpx solid #999999;
					border-radius: 4rpx;
				}
			}

		}

		.div-line {
			margin: 30rpx 0;
			border-top: 1rpx solid #EBEBEB;
		}

		.shop-location {
			.location-main {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.shop-address {
					padding-right: 40rpx;
					border-right: 1rpx solid #ebebeb;
					width: 426rpx;
					font-size: 28rpx;
					color: #1B1B1B;
					line-height: 40rpx;
				}
			}

			.shop-distance {
				margin-top: 16rpx;
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
			}
		}
	}

	.shop-info {
		// width: 100%;
		padding: 0 30rpx;
		margin: $margin-updown 0;
		padding: $padding;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: $border-radius;
	}

	.shop-image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: $margin-updown;
		border: 1rpx solid $color-line;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.shop-con {
		width: calc(80% - 90rpx - 20rpx);
		color: #ffffff;
	}

	.info-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 4rpx;

		.info-name {
			width: 60%;
			font-size: $font-size-base;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			.icongengduo {
				font-size: 26rpx;
				margin-top: 2rpx;
				font-weight: normal;
				font-weight: bold;
				margin-left: 10rpx;
			}
		}
	}

	button[size='mini'].info-follow {
		line-height: 1.8 !important;
		padding: 0 $padding !important;

		position: absolute;
		right: $margin-both;
		top: $margin-updown;

		.iconfont {
			margin-right: 10rpx;
			font-size: $font-size-tag;
		}

		.iconfont.active {
			margin-right: 10rpx;
			font-size: $font-size-tag;
			color: #ffffff;
		}

	}

	button[size='mini'].info-weixin {
		line-height: 1.8 !important;
		padding: 0 $padding !important;
		background-color: #31bb6d;

		position: absolute;
		right: $margin-both;
		bottom: $margin-updown;

		.iconfont {
			margin-right: 10rpx;
			font-size: $font-size-tag;
		}

		.iconfont.active {
			margin-right: 10rpx;
			font-size: $font-size-tag;
			color: #ffffff;
		}

	}

	.info-desc {
		width: 100%;
		display: flex;
		align-items: center;

		.desc-star {
			display: flex;
			align-items: center;
			font-size: 20rpx;
		}

		.fans {
			margin-left: $margin-updown;
			font-size: 20rpx;
		}
	}

	.kefu-modal {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 60rpx 30rpx;
		width: 550rpx;
		border-radius: 20rpx;
		background-color: #fff;
		flex-direction: column;

		.kefu-text,
		.kefu-mobile {
			font-size: 28rpx;
			color: #323232;
			line-height: 40rpx;
		}

		.kefu-mobile {
			color: #5374ED;
		}

		.kefu-qrcode {
			margin-top: 30rpx;
			width: 400rpx;
			height: 400rpx;

			.kefu-qrcode-image {
				width: 100%;
				height: 100%;
			}
		}

		.kefu-save {
			margin-top: $margin-updown;
		}
	}
</style>